<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="echarts.min.js"></script>
    <script src="chalk.js"></script>
    <title>Title</title>
</head>
<body style="margin: 0px">

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->

<div id="main" style="width: 100%;height:200px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化ECharts实例
    var myChart = echarts.init(document.getElementById('main'),'chalk');
    myChart.showLoading();

        option = {
        backgroundColor: '#0f1217',
            grid: {
                top:80
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['AQI','PM2.5'],
                right:50
            },
            toolbox: {
                show: true,
                itemSize: 30,
                left:50,
                feature: {
                    magicType: {type: ['line', 'bar']},
                }
            },
            xAxis:  {
                type: 'category',
                boundaryGap: false
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value}'
                }
            },
            series: [
                {
                    name:'AQI',
                    type:'line',
                    itemStyle : {
                        normal: {
                            color:'#d52f13',
                            label : {
                                show: true,
                                }
                            }
                    },
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值',label:{normal:{color:'#fff'}}},
                            {type: 'min', name: '最小值',label:{normal:{color:'#fff'}}}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    },
                    lineStyle:{
                        normal:{
                            color:'#d52f13'
                        }
                    }
                },
                {
                    name:'PM2.5',
                    type:'line',
                    itemStyle : {
                        normal: {
                            color:'#1663ff',
                            label : {
                                show: true,
                                }
                            }
                    },
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值',label:{normal:{color:'#fff'}}},
                            {type: 'min', name: '最小值',label:{normal:{color:'#fff'}}}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    },
                    lineStyle:{
                        normal:{
                            color:'#1663ff'
                        }
                    }
                }
            ]
        };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    function showLineData(msg0,msg1,msg2) {
        myChart.hideLoading();
        myChart.setOption({
            xAxis:  {
                data: msg0
            },
            series: [
                {
                    data:msg1
                },
                {
                    data:msg2
                }
            ]
        });
    }
</script>
</body>
</html>